<template>
    <div class="section-wrap">
        <div class="form-section">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患编号</label>
                </div>
                <div>
                    <input type="text"
                           :value="detailData.No"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患类别</label>
                </div>
                <div>
                    <input type="text"
                           :value="detailData.Category"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>隐患描述</label>
                </div>
                <div>
                    <p class="textarea">{{detailData.Description | myTrim}}</p>
                    <!-- <textarea placeholder="请输入隐患描述（自行换行）"
                              v-model="detailData.Description"
                              :disabled="isDisabled"></textarea> -->
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <label>整改前照片</label>
                    <span>当前共{{detailData.ProblemImgs?detailData.ProblemImgs.length: 0}}张照片</span>
                </div>
                <div class="upload-wrap">
                    <upload v-if="detailData.ProblemImgs&&detailData.ProblemImgs.length>0"
                            :imgList="detailData.ProblemImgs"></upload>
                    <strong v-else
                            class="no-img">暂无图片</strong>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>隐患措施</label>
                    </div>
                    <span @click="unfoldMeasure = !unfoldMeasure">{{unfoldMeasure?'收起': '展开'}}</span>
                </div>
                <div>
                    <!-- <textarea placeholder="请输入隐患描述（自行换行）"></textarea> -->
                    <p class="textarea"
                       :class="{'unfold':unfoldMeasure}">{{detailData.Measure | myTrim}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患级别</label>
                </div>
                <div>
                    <input type="text"
                           :value="detailData.HdLevel"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>整改开始时间</label>
                </div>
                <div>
                    <input type="text"
                           :value="detailData.ResolveStartTime.split(' ')[0]"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>整改结束时间</label>
                </div>
                <!-- <group>
                    <datetime v-model="endTime"></datetime>
                </group> -->
                <div>
                    <input type="text"
                           v-model="detailData.ResolveEndTime.split(' ')[0]"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>被检查单位</label>
                </div>
                <div>
                    <input type="text"
                           v-model="detailData.DeptName"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>被检查单位负责人</label>
                </div>
                <div>
                    <input type="text"
                           v-model="detailData.ProjectDutyPerson"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>隐患部位</label>
                </div>
                <div>
                    <input type="text"
                           v-model="detailData.ResolveArea"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>整改责任人</label>
                </div>
                <div>
                    <input type="text"
                           v-model="detailData.ResolveAreaDutyPerson"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改单位</label>
                </div>
                <div>
                    <input type="text"
                           v-model="detailData.ResolveDeptName"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改执行人</label>
                </div>
                <div>
                    <input type="text"
                           v-model="detailData.ResolveDutyPersonName"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改班组</label>
                </div>
                <div>
                    <input type="text"
                           v-model="detailData.ResolveGroup"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1"
                 v-if="detailData.ResolveArea !== '无'">
                <div class="label-title">
                    <label>整改班组责任人</label>
                </div>
                <div>
                    <input type="text"
                           v-model="detailData.ResolveGroupDutyPerson"
                           :disabled="isDisabled">
                </div>
            </div>
        </div>
        <div class="form-section">
            <h3>检查人信息</h3>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>检查单位</label>
                </div>
                <div>
                    <input type="text"
                           :value="detailData.CheckDeptName"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>检查人</label>
                </div>
                <div>
                    <input type="text"
                           :value="detailData.CheckPerson"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>电话</label>
                </div>
                <div>
                    <input type="text"
                           :value="detailData.Tel"
                           :disabled="isDisabled">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>检查时间</label>
                </div>
                <div>
                    <input type="text"
                           :value="detailData.CheckTime.split(' ')[0]"
                           :disabled="isDisabled">
                </div>
            </div>
        </div>
        <div v-for="(item,index) in detailData.Resolves"
             :key="`${index}`">
            <div class="form-section">
                <h3>
                    <span>整改信息</span>
                    <span>(第{{index+1 | toChinesNum}}次整改)</span>
                </h3>
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>整改情况回复</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <p class="textarea">{{item.Description}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>实际完成时间</label>
                    </div>
                    <div>
                        <p>{{item.ResolveTime.split(' ')[0]}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title space-between">
                        <div class="space-between">
                            <label>整改后照片</label>
                            <i class="iconfont icon-required"></i>
                        </div>
                        <span>当前共{{item.ResolveImgs.length}}张照片</span>
                    </div>
                    <div class="upload-wrap">
                        <upload v-if="item.ResolveImgs.length"
                                :imgList="item.ResolveImgs"></upload>
                        <strong v-else
                                class="no-img">暂无图片</strong>
                    </div>
                </div>
            </div>
            <div class="form-section"
                 v-if="item.Check">
                <h3>
                    <span>验收信息</span>
                    <span>(第{{index+1 | toChinesNum}}次验收)</span>
                </h3>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验收负责人</label>
                    </div>
                    <div>
                        <p>{{item.Check.CheckDutyPerson}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验收日期</label>
                    </div>
                    <div>
                        <p>{{item.Check.CheckTime.split(' ')[0]}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验收结果</label>
                    </div>
                    <div>
                        <p>{{item.Check.IsApproved?'验收合格':'验收不合格'}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>验收情况回复</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <p class="textarea">{{item.Check.Description}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title space-between">
                        <div class="space-between">
                            <label>验收后照片</label>
                            <i class="iconfont icon-required"></i>
                        </div>
                        <span>当前共{{item.Check.CheckImgs.length}}张照片</span>
                    </div>
                    <div class="upload-wrap">
                        <upload v-if="item.Check.CheckImgs.length>0"
                                :imgList="item.Check.CheckImgs"></upload>
                        <strong v-else
                                class="no-img">暂无图片</strong>
                    </div>
                </div>
            </div>
            <div class="form-section"
                 v-if="item.Verify">
                <h3>
                    <span>隐患审核</span>
                    <span>(第{{index+1 | toChinesNum}}次审核)</span>
                </h3>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>审核日期</label>
                    </div>
                    <div>
                        <p>{{item.Verify.CheckTime.split(' ')[0]}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>审核结果</label>
                    </div>
                    <div>
                        <p>{{item.Verify.IsApproved?'审核合格':'审核不合格'}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>审核情况回复</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <p class="textarea">{{item.Verify.Description}}</p>
                    </div>
                </div>
            </div>
            <div class="form-section"
                 v-if="item.DepartReview">
                <h3>
                    <span>隐患复查</span>
                    <span>(第{{index+1 | toChinesNum}}次复查)</span>
                </h3>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证日期</label>
                    </div>
                    <div>
                        <p>{{item.DepartReview.CheckTime.split(' ')[0]}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证结果</label>
                    </div>
                    <div>
                        {{item.DepartReview.IsApproved?'验证合格':'验证不合格'}}
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证方式</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="select-section">
                        <div :class="{'active':item.DepartReview.Spot}">
                            现场
                        </div>
                        <div :class="{'active':item.DepartReview.Material}">
                            资料
                        </div>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>验证结论意见</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <p class="textarea">{{item.DepartReview.Description}}</p>
                    </div>
                </div>
            </div>
            <div class="form-section"
                 v-if="item.Confirm">
                <h3>
                    <span>复查验证</span>
                    <span>(第{{index+1 | toChinesNum}}次复查)</span>
                </h3>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证日期</label>
                    </div>
                    <div>
                        <p>{{item.Confirm.CheckTime.split(' ')[0]}}</p>
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证结果</label>
                    </div>
                    <div>
                        {{item.Confirm.IsApproved?'验证合格':'验证不合格'}}
                    </div>
                </div>
                <div class="form-item form-item-style1">
                    <div class="label-title">
                        <label>验证方式</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div class="select-section">
                        <div :class="{'active':item.Confirm.Spot}">
                            现场
                        </div>
                        <div :class="{'active':item.Confirm.Material}">
                            资料
                        </div>
                    </div>
                </div>
                <div class="form-item form-item-style2">
                    <div class="label-title">
                        <label>验证结论意见</label>
                        <i class="iconfont icon-required"></i>
                    </div>
                    <div>
                        <p class="textarea">{{item.Confirm.Description}}</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-section"
             v-if="showSubmit">
            <h3>
                <span>验收信息</span>
            </h3>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>验收负责人</label>
                </div>
                <div>
                    <p>{{checkDutyPerson}}</p>
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>验收日期</label>
                </div>
                <group>
                    <datetime v-model="checkTime"></datetime>
                </group>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>验收结果</label>
                </div>
                <!-- <div>
                    <input type="text"
                           value="合格">
                </div> -->
                <group>
                    <popup-picker :data="accopt"
                                  placeholder='请选择'
                                  v-model="accoptVal"></popup-picker>
                </group>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title">
                    <label>验收情况回复</label>
                    <!-- <i class="iconfont icon-required"></i> -->
                </div>
                <div>
                    <textarea placeholder="请输入回复（自行换行)"
                              v-model="description"></textarea>
                </div>
            </div>
            <div class="form-item form-item-style2">
                <div class="label-title space-between">
                    <div class="space-between">
                        <label>验收后照片</label>
                        <!-- <i class="iconfont icon-required"></i> -->
                    </div>
                    <span>当前共{{YSuploadLength}}张照片</span>
                </div>
                <div class="upload-wrap">
                    <upload @setFormData="setYSFormData"
                            :hasWatermark="true"></upload>
                </div>
            </div>
            <div class="btns">
                <!-- <button>保存</button> -->
                <button @click="handleSubmit"
                        class="green width200">提交</button>
            </div>
        </div>
        <myMenu></myMenu>
    </div>
</template>
<script>
import upload from '@/commonComponents/upload/index'
import formatDate from '@/utils/formatDate'
// import chooseImage from '@/commonComponents/chooseImage/index'
import myMenu from '@/commonComponents/menu'
export default {
    data () {
        return {
            isDisabled: true, // 是否禁止输入
            detailData: {}, // 详情数据
            accopt: [['验收合格', '验收不合格']], // 验收结果
            accoptVal: ['验收合格'],
            unfoldMeasure: false, // 展开隐患措施
            YSFormData: '', // 验收后上传图片formData对象
            YSuploadLength: 0, // 验收后上传图片数量
            checkDutyPerson: '', // 验收人负责人姓名
            checkTime: formatDate(), // 验收时间
            description: '', // 验收情况回复
            userInfo: {},
            showSubmit: false
        }
    },
    components: {
        upload,
        myMenu
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        this.showSubmit = !(this.$route.query.type == 1 || this.getQuery().type == 1)
        this.userInfo = JSON.parse(localStorage.getItem('userInfo')) || {}
        this.checkDutyPerson = this.userInfo.username
        this.getData()
    },
    methods: {
        getData () {
            var that = this
            let param = {
                'allowPaging': false,
                'business': 'FetchHiddenDanger',
                'data': this.$route.query.id || this.getQuery().id,
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(param)
                .then(res => {
                    if (res.data.code == 0) {
                        that.detailData = res.data.data
                    }
                }).finally(() => {
                    this.$vux.loading.hide()
                })
        },
        setYSFormData (formData, uploadLength) {
            this.YSFormData = formData
            this.YSuploadLength = uploadLength
        },
        // 提交
        handleSubmit () {
            this.$vux.loading.show({
                text: '正在提交...'
            })
            let params = {
                'allowPaging': true,
                'business': 'CheckHiddenDanger',
                'data': {
                    'checkDutyPerson': this.checkDutyPerson, // 验收人负责人姓名
                    'checkDutyPersonId': this.userInfo.userid, // 验收人负责人ID
                    'checkTime': this.checkTime, // 验收时间
                    'description': this.description, // 验收情况
                    'hiddenDangerId': this.$route.query.id, // 隐患ID
                    'isApproved': this.accoptVal[0] === '验收合格', // 是否通过审批
                    'resolveId': this.detailData && this.detailData.Resolves[this.detailData.Resolves.length - 1] ? this.detailData.Resolves[this.detailData.Resolves.length - 1].Id : '', // 整改ID
                    'sequence': 0
                },
                'method': 'submit',
                'pageIndex': 0,
                'pageSize': 20,
                'tokenId': '',
                'userId': this.userInfo.userid
            }
            this.$axiosAjax.getConfigJson(params, this.YSFormData).then((res) => {
                if (res.data.code === 0) {
                    this.$vux.toast.text('提交成功')
                    setTimeout(() => {
                        this.$router.replace('/hideCheckAndAccept')
                    }, 1000)
                }
            }).catch((res) => {
                console.log(res.data.info)
            }).finally(() => {
                this.$vux.loading.hide()
            })
        }
    }
}
</script>

<style scoped>
.select-section {
    display: flex;
}
.select-section div {
    padding-left: 26px;
    background: url(../../../../static/images/select.png) no-repeat left center;
    background-size: 17px 17px;
}
.select-section div:first-child {
    margin-right: 58px;
}
.select-section .active {
    background: url(../../../../static/images/selected.png) no-repeat left
        center;
    background-size: 17px 17px;
}
.form-item .hideCategory {
    font-size: 13px;
    color: #999;
}
</style>
<style>
.section-wrap .weui-select {
    font-size: 13px;
    color: #999;
    text-align: center;
}
</style>
